<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row type="flex" justify="end">
          <a-col :md="6" :sm="8">
            <a-form-item label="数据中心">
              <a-select
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
                v-model="datacenterId">
                <a-select-option
                  v-for="d in datacenterList"
                  :key="d.id"
                  :value="d.id"
                  >{{ d.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :md="12" :sm="24">
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
                >查询</a-button
              >
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" icon="edit" size="small" @click="handleConfig(record)">控制方式</a-button>
        <!-- <a-divider type="vertical" />
        <a @click="handleDetail(record)">详情</a> -->
      </span>
    </a-table>
    <config-modal ref="configModal" @ok="loadData(true)"></config-modal>
  </a-card>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";
import ConfigModal from "./modules/ConfigModal";
// import DetailModal from './modules/DetailModal'

export default {
  name: "F010204",
  mixins: [GwListMixin],
  components: {
    ConfigModal,
    // DetailModal,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "服务器名称",
          width: 200,
          dataIndex: "factorName",
        },
        {
          title: "带外管理IP",
          dataIndex: "ipmiIp",
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "功耗",
          dataIndex: "powerConsumption",
          customRender: function (t, r, index) {
            return t + " W";
          },
        },
        {
          title: "功耗控制方式 ",
          dataIndex: "controlType",
          customRender: function (t, r, index) {
            return t === 0 ? "自动" : "手动";
          },
        },
        {
          title: "操作",
          width: 100,
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      datacenterId: "",
      datacenterList: [],
      url: {
        list: "/fm/page",
        datacenterList: "/asset/pageDatacenter",
      },
    };
  },
  mounted() {
    this.loadDatacenter();
    this.loadData();
  },
  methods: {
    loadData(isDoSearch) {
      this.gQueryParam.datacenterId = "";
      if (this.datacenterId) {
        this.gQueryParam.datacenterId = this.datacenterId;
      }
      this.gQueryParam.pageNo = 1;
      this.gQueryParam.pageSize = 10;
      if (isDoSearch) {
        this.gQueryParam.pageNo = 1;
        this.gPagination.current = 1;
      }
      this.gQueryParam.title = "精确管控与供电制冷联动-精确能耗管控-计算节点控制";
      this.gQueryParam.content = "查询计算节点控制列表"
      gPostAction(this.url.list, this.gQueryParam).then(
        (res) => {
          const data = res.data;
          if (data && data.list) {
            this.gDataSource = data.list;
            this.gPagination.total = data.totalCount;
          }
        }
      );
    },
    loadDatacenter() {
      gPostAction(this.url.datacenterList, {}).then((res) => {
        const data = res.data;
        if (data && data.list) {
          this.datacenterList = data.list;
          this.datacenterList.unshift({id:'',name:'全部'});
        }
      });
    },
    handleDetail(data) {
      this.$refs.detailModal.showModal(data);
    },
    handleConfig(data) {
      this.$refs.configModal.config(data);
    },
    resetSearchForm() {
      this.datacenterId = "";
    },
  },
};
</script>
<style scoped>

</style>
